<template>
  <div class="h-full flex-col">
    <SearchForm @handle-reset="resetParams" @handle-search="getList">
      <el-form :model="searchForm" inline>
        <el-form-item>
          <el-input v-model="searchForm.agent_player_name" placeholder="로얄회원ID" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchForm.agent_player_id" placeholder="로얄회원번호" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchForm.player_id" placeholder="JADE회원번호" />
        </el-form-item>
      </el-form>
    </SearchForm>
    <div class="page-card h-full" v-loading="loading">
      <MyTable :tableData="tableData" :tableColumn="tableColumn" v-slot="sp">
        <el-table :data="tableData" :highlight-current-row="true">
          <el-table-column v-if="sp.ctc.includes('ID')" label="ID" prop="guid" align="center" />

          <el-table-column
            v-if="sp.ctc.includes('Jade회원ID')"
            label="Jade회원ID"
            prop="player_id"
            align="center"
          />

          <el-table-column
            v-if="sp.ctc.includes('로얄회원번호')"
            label="로얄회원번호"
            prop="agent_player_id"
            align="center"
          />

          <el-table-column
            v-if="sp.ctc.includes('로얄회원ID')"
            label="로얄회원ID"
            prop="agent_player_name"
            align="center"
          />

          <el-table-column
            v-if="sp.ctc.includes('사이트명')"
            label="사이트명"
            prop="agent_player_brand"
            align="center"
          />

          <el-table-column v-if="sp.ctc.includes('변동게임사')" label="변동게임사" align="center">
            <template #default="{ row }">
              {{ row.change_provider }}
            </template>
          </el-table-column>

          <el-table-column v-if="sp.ctc.includes('변동금액')" label="변동금액" align="center">
            <template #default="{ row }">
              <el-tag :type="row.change_amount > 0 ? 'danger' : 'success'">{{
                formatNumber(row.change_amount)
              }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            v-if="sp.ctc.includes('변동후잔액')"
            label="변동후잔액"
            align="center"
            prop="balance"
            sortable
          >
            <template #default="{ row }">
              <el-tag :type="row.balance > 0 ? 'danger' : 'success'">{{
                formatNumber(row.balance)
              }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            v-if="sp.ctc.includes('수정시간')"
            label="수정시간"
            align="center"
            width="200"
          >
            <template #default="{ row }">
              {{ row.ts }}
            </template>
          </el-table-column>
        </el-table>

        <Pagination
          :pageable="page"
          :handleSizeChange="handleSizeChange"
          :handleCurrentChange="handleCurrentChange"
        />
      </MyTable>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useTable } from '@/hooks/useTable';
import { playerBalanceAdjustHistoryApi } from '@/api/member/index';
import { formatNumber, formatDate, timestampToSeoul } from '@/utils/util';
import MyTable from '@/components/MyTable';

const tableColumn = ref([
  'ID',
  'Jade회원ID',
  '로얄회원번호',
  '로얄회원ID',
  '사이트명',
  '변동게임사',
  '변동금액',
  '변동후잔액',
  '수정시간'
]);

const searchForm = reactive({
  agent_player_id: '',
  agent_player_name: '',
  player_id: ''
});

const dataCallBack = (data: any) => {
  const _data = data.data;
  let _list = _data.list.map((item: any) => {
    item.change_provider = item.change_provider ? 'EVO' : 'PP';
    item.ts = timestampToSeoul(item.ts * 1000, 'Y-m-d H:i:s', 1);
    return item;
  });

  return {
    list: _list,
    total: _data.total_count
  };
};

const { tableData, page, loading, resetParams, getList, handleCurrentChange, handleSizeChange } =
  useTable({
    apiFn: playerBalanceAdjustHistoryApi,
    params: searchForm,
    callback: dataCallBack
  });
</script>

<style lang="scss" scoped></style>
